import React, { Component } from 'react';
import { Message } from '@alifd/next';


const TransferHoc = (WrappedComponent) => {
    return class extends Component {
        constructor() {
            super(...arguments);
            this.state = {
                showTransfer: false,
                dataSource: [],         //transfer组件的原始数据
                defaultValue: [],         //右面板值（非受控），弹窗后原始数据值都非受控，显示在右面板
                defaultData: [],          //右面板数据
                transferDefault: [],      //设置默认数据，用于恢复默认显示
                filterTableHeaders: [],   //过滤后的表头数据
            };
        }

        //切换数据
        handleChange = (value, data, extra) => {
            this.setState({
              defaultData: data,  //剩下的右面板数据
              defaultValue: value,  //剩下的右面板值
            })
        }

        /**
         * 弹窗加载初始值
         * _tableHeaders： 表格头部原始数据
         */
        handleTransfer = (_tableHeaders) => {
            let _dataSource = [], _defaultValue = [];
            let tableHeaders = _tableHeaders;
            const {showTransfer, defaultValue} = this.state;
        
            if (tableHeaders && tableHeaders.length > 0) {
                //将原始数据构造成Transfer数据结构“{label:'', value:'', disabled: false}”
                for(let i = 0; i < tableHeaders.length; i++) {
                    _dataSource.push({
                        label: `${tableHeaders[i].headerName}`,
                        value: `${tableHeaders[i].headerKey}`,
                        disabled: i === 0
                    })
                    _defaultValue.push(tableHeaders[i].headerKey);
                }
            }
            let _state = {
                showTransfer: !showTransfer,
                dataSource: _dataSource,
            };
            if (defaultValue && defaultValue.length == 0) {
                _state['defaultValue'] = _defaultValue;   
                _state['transferDefault'] = _dataSource;  //保存重构数据结构后的原始数据
            }
            this.setState(_state)
        }
        
        //保存设置
        saveTransferSet = () => {
            let _tableHeaders = [], that = this;
            const {defaultData} = this.state;
            if (defaultData.length > 0) {
                for (let i = 0; i < defaultData.length; i++) {
                _tableHeaders.push({
                    headerKey: defaultData[i].value,
                    headerName: defaultData[i].label
                })
                }
            }
            this.setState({
                dataSource: defaultData,
                showTransfer: false,
                filterTableHeaders: _tableHeaders,
                loading: true,
            })
            Message.show({
                type: 'success',
                content: '修改成功！',
                hasMask: true,
                duration: 1000
            });
            setTimeout(function() {
                that.setState({
                    loading: false,
                })

                let parsentW = document.querySelector('.scrollbar-table .scroll-content').offsetWidth;
                let childTableW = document.querySelector('.scrollbar-table .scroll-content table').scrollWidth;
                console.log(parsentW, childTableW)
                if (parsentW < childTableW) {
                    document.querySelector('.scrollbar-table .next-table-header').setAttribute('style','margin-bottom:-15px');
                } else {
                    document.querySelector('.scrollbar-table .next-table-header').setAttribute('style','margin-bottom:0');
                }
            }, 200)
        }
    
        //恢复默认
        restoreDefault = () => {
            let _tableHeaders = [], _defaultValue = [], _dataSource = [], that = this;
            const {transferDefault} = this.state;
            if (transferDefault.length > 0) {
                for (let i = 0; i < transferDefault.length; i++) {
                _tableHeaders.push({
                    headerKey: transferDefault[i].value,
                    headerName: transferDefault[i].label
                })
                _dataSource.push({
                    label: `${transferDefault[i].label}`,
                    value: `${transferDefault[i].value}`,
                    disabled: i === 0
                })
                _defaultValue.push(transferDefault[i].value);
                }
            }
            this.setState({
                dataSource: _dataSource,
                defaultValue: _defaultValue,
                filterTableHeaders: _tableHeaders,
                showTransfer: false,
                loading: true,
            })
            Message.show({
                type: 'success',
                content: '恢复默认设置成功！',
                hasMask: true,
                duration: 1000
            });
            setTimeout(function() {
                that.setState({
                loading: false,
                })
            }, 300)
        }

        render() {
            return (
                <WrappedComponent 
                    {...this.state}
                    handleChange={this.handleChange}
                    saveTransferSet={this.saveTransferSet}
                    handleTransfer={this.handleTransfer}
                    restoreDefault={this.restoreDefault}
                />
            )
        }
    }
}

export default TransferHoc;